<template>
  <div>
<!--    查询条件开始-->
      <el-form ref="queryForm" :model="userDto" :inline="true" label-width="68px">
        <el-form-item label="用户名" prop="title">
          <el-input v-model="userDto.name" placeholder="请输入用户名" clearable size="small" style="width:150px"/>
        </el-form-item>

        <el-form-item label="用户性别" prop="status">
          <el-select v-model="userDto.sex" placeholder="请选择类型" clearable size="small" style="width:150px">
            <el-option v-for="dict in userSex" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
          </el-select>
        </el-form-item>

        <el-form-item label="用户状态" prop="businessType">
          <el-select v-model="userDto.status" placeholder="请选择状态" clearable size="small" style="width:150px" >
            <el-option v-for="dict in userStatus" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getQueryUserDto">搜索</el-button>
          <el-button type="normal" icon="el-icon-refresh" size="mini" @click="restUserDto">重置</el-button>
        </el-form-item>
      </el-form>
<!--    查询条件结束-->

<!--    表头按钮开始-->
    <el-row :gutter="10" style="margin-bottom: 8px;">
      <el-col :span="1.5">
        <el-button type="primary"  size="mini" @click="openAddUserInfo">添加员工</el-button>
        <el-dialog
          title="添加员工"
          :visible.sync="addUserVisible"
          width="30%"
          :before-close="handleClose">

          <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
              <el-col :span="24" :xs="24">
                <el-form-item label="员工姓名" prop="name" required>
                  <el-input v-model="ruleForm.name" placeholder="请输入员工姓名" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" :xs="24">
                <el-form-item label="手机号" required prop="phone">
                  <el-input v-model="ruleForm.phone" placeholder="请输入手机号" size="small" onkeyup = "value=value.replace(/[^\d]/g,'')"/>
                </el-form-item>
              </el-col>
              <el-col :span="24" :xs="24">
                <el-form-item label="密码" prop="password" required>
                  <el-input v-model="ruleForm.password" placeholder="密码" size="small" />
                </el-form-item>
              </el-col>
              <el-col :span="24" :xs="24">
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="ruleForm.age" placeholder="请输入年龄" size="small" onkeyup = "value=value.replace(/[^\d]/g,'')"/>
                </el-form-item>
              </el-col>
              <el-col :span="24" :xs="24">
                <el-form-item
                  prop="email"
                  label="邮箱"
                  :rules="[
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                  ]">
                  <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" :xs="24">
                <el-form-item label="现居地址" prop="address">
                  <el-input v-model="ruleForm.address" placeholder="现居地址" size="small" />
                </el-form-item>
              </el-col>
              <el-col :span="24" :xs="24">
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="ruleForm.sex" size="small" >
                    <el-radio :label="1" value="1">男</el-radio>
                    <el-radio :label="0" value="0">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addUserVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUserTwo">确 定</el-button>
          </span>
        </el-dialog>
      </el-col>
    </el-row>
<!--    表头按钮结束-->

    <el-table
      ref="singleTable"
      :data="userList"
      border
      :header-cell-style="{'color': '#3D4144'}"
      style="width: 100%">
      <el-table-column label="用户名" width="100" prop="name"/>
      <el-table-column label="手机号" prop="phone"/>
      <el-table-column label="年龄" width="100" prop="age"/>
      <el-table-column label="性别" width="100" prop="sex" filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag :type="scope.row.sex === 1 ? '' : 'warning'" disable-transitions>{{scope.row.sex===1 ? '男':'女'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="邮箱地址" prop="email"/>
      <el-table-column label="现居地址" prop="address"/>
      <el-table-column label="入职时间" >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" prop="sex" filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'danger' : 'success'" disable-transitions>{{scope.row.status===1 ? '冻结':'正常'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <router-link :to="{'path':'/system/details/' + scope.row.id}" class="el-button el-button--text el-button--small" style="font-size: 15px">
            详情
          </router-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

import {getQueryUserList, addUser, isUserByPhone} from "@/api/system";

export default {
  name: "userList",
  props:['userList','getUserList','roleId'],
  data(){
    return{
      userSex:[{'dictValue':'1','dictLabel':'男'},{'dictValue':'0','dictLabel':'女'}],
      userStatus:[{'dictValue':'0','dictLabel':'正常'},{'dictValue':'1','dictLabel':'冻结'}],
      // 模糊查询条件
      userDto:{
        name:undefined,
        sex:undefined,
        status:undefined
      },
      // 选中行的值
      ruleForm:{
        phone:'',
        name:'',
        password:'',
        email:'',
        address:'',
        age:'',
        sex:''
      },
      // 添加员工弹出框
      addUserVisible: false
    }
  },
  methods:{
    /**
     * 新增员工
     */
    addUserTwo(){
      isUserByPhone(this.ruleForm.phone).then(res => {
        if(res.data){
          this.$message.error('手机号已存在!')
        }else{
          addUser(this.roleId,this.ruleForm).then(res => {
            if (res.data){
              this.addUserVisible = false
              this.getQueryUserDto()
              this.$message({
                message: '添加成功',
                type: 'success'
              });
            }else{
              this.$message.error(res.msg);
            }
          })
        }
      })
    },

    /**
     * 打开新增员工窗口
     */
    openAddUserInfo(){
      if(this.roleId !== '' && this.roleId !== undefined){
        this.addUserVisible = true
      }else{
        this.$message({
          message: '请选择部门再进行操作',
          type: 'warning'
        });
      }
    },

    /**
     * 根据条件搜索用户
     */
    getQueryUserDto(){
      const queryUser = {
        roleId:this.roleId,
        name:this.userDto.name,
        sex:this.userDto.sex,
        status:this.userDto.status
      }
      getQueryUserList(queryUser).then(res=>{
        this.getUserList(res.data)
      })
    },

    /**
     * 清空
     */
    restUserDto(){
      this.userDto = {
        name:undefined,
        sex:undefined,
        status:undefined
      }
    },

    /**
     * 弹出层是否关闭
     * @param done
     */
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.MoRen = []
          done();
        })
        .catch(_ => {});
    },

  },
  watch:{
    'userDto.name':{
      handler(newVal,oldVal){
        this.getQueryUserDto()
      },
      deep:true
    },
    'userDto.sex':{
      handler(newVal,oldVal){
        this.getQueryUserDto()
      },
      deep:true
    },
    'userDto.status':{
      handler(newVal,oldVal){
        this.getQueryUserDto()
      },
      deep:true
    }
  }
}
</script>

<style scoped>

</style>
